body {
    position: relative;
    box-sizing: border-box;
}

#header-cvn,
#eyebrow #eyebrow-cvn,
#goodsNumbs #goodsNumbs-cvn,
#goods-lists,
#hander #hander-first ul,
#hander #hander-two,
#hander #hander-three {
    width: 1200px;
    margin: 0 auto;
}


/*------高度坍塌------*/

#displaynonelook {
    clear: both;
    height: 0;
    overflow: hidden;
}


/*----------- 这是头部 */

#header {
    width: 100%;
    height: 100px;
}

#header #header-cvn {
    height: 100px;
}

#header-cvn img {
    margin-top: 13px;
    float: left;
}

#header-cvn .header-two {
    width: 124px;
    height: 100px;
    float: left;
    margin-left: 50px;
}

#header-cvn .header-two p:nth-of-type(1) {
    color: #666666;
    font-size: 16px;
    margin-top: 32px;
    margin-bottom: 5px;
}

#header-cvn .header-two p:nth-of-type(1) .spantwo {
    display: block;
    width: 40px;
    height: 18px;
    background-color: #cc5252;
    font-size: 11px;
    color: white;
    text-align: center;
    line-height: 18px;
    border-radius: 100px;
    float: right;
    margin-top: 3px;
}

#header-cvn .header-two p:nth-of-type(2) {
    color: #999999;
    font-size: 11px;
}

#header-cvn .header-three {
    float: right;
    margin-top: 38px;
}

#header-cvn .header-three li {
    float: left;
    font-size: 16px;
    margin-right: 10px;
    color: #666666;
}

#header-cvn .header-three li a {
    color: #666666;
}


/* ------------------- */

#ears {
    width: 100%;
    height: 120px;
}

#ears img {
    width: 100%;
    height: 100%;
}

#eyebrow {
    width: 100%;
    height: 44px;
    background-color: #000000;
}

#eyebrow #eyebrow-cvn {
    height: 44px;
}

#eyebrow #eyebrow-cvn .eyebrow-cvnone .span-two {
    display: block;
    float: right;
}

#eyebrow #eyebrow-cvn .eyebrow-cvntwo {
    float: left;
    margin-left: 72px;
}

#eyebrow #eyebrow-cvn .eyebrow-cvntwo li {
    float: left;
    padding-right: 50px;
}

#eyebrow #eyebrow-cvn .eyebrow-cvntwo li a {
    display: block;
    height: 44px;
    font-size: 14px;
    color: aliceblue;
    line-height: 44px;
}

#eyebrow #eyebrow-cvn .eyebrow-cvntwo li .a-one {
    border-bottom: 3px solid aliceblue;
}

#eyebrow #eyebrow-cvn .eyebrow-cvntwo li a:hover {
    color: #ff9900;
    border-bottom: 3px solid aliceblue;
}

#eyebrow #eyebrow-cvn .eyebrow-cvnthree {
    color: aliceblue;
    width: 78px;
    font-size: 12px;
    float: right;
    margin-top: 13px;
    margin-left: 18px;
}

#eyebrow #eyebrow-cvn .eyebrow-cvnthree .span-one {
    display: block;
    width: 28px;
    height: 20px;
    background-image: url(../img/d.png);
    background-position: -440px -336px;
    float: left;
}

#eyebrow #eyebrow-cvn .eyebrow-cvnthree a .span-two {
    display: block;
    float: right;
    color: aliceblue;
}


/*-------====================商品列表数据-1=====================*/

#goodsNumbs {
    width: 100%;
    margin-top: 20px;
    /* height: 100px; */
}

#goodsNumbs-cvn {
    margin: auto;
}

#goodsNumbs-cvn .goodsNumbs-left {
    width: 215px;
    height: 100%;
    float: left;
}

.goodsNumbs-left .goodNumbs-leftTop {
    width: 215px;
    height: 191px;
    border: 1px solid #dddddd;
}

.goodsNumbs-left .goodNumbs-leftTop p {
    width: 100%;
    height: 40px;
    font-size: 12px;
    color: #666666;
    background-color: #eee;
    line-height: 40px;
    text-indent: 10px;
}

.goodsNumbs-left .goodNumbs-leftTop span {
    font-size: 11px;
    color: #666;
}

.goodsNumbs-left .goodNumbs-leftTop .span1 {
    margin-left: 20px;
}

.goodsNumbs-left .goodNumbs-leftTop .span2 {
    margin-left: 10px;
}

.goodsNumbs-left .goodNumbs-leftTop input {
    margin-left: 10px;
    border: 1px solid #ddd;
    text-indent: 5px;
}

.goodsNumbs-left .goodNumbs-leftTop .input1 {
    width: 120px;
    height: 28px;
    margin-top: 20px;
}

.goodsNumbs-left .goodNumbs-leftTop .input2 {
    width: 48px;
    height: 28px;
    margin-top: 12px;
}

.goodsNumbs-left .goodNumbs-leftTop button {
    width: 68px;
    height: 28px;
    background-color: #cc5252;
    color: #fff;
    border: none;
    outline: none;
    margin-top: 12px;
    margin-left: 70px;
}

.goodsNumbs-left .goodNumbs-leftBot {
    margin-top: 10px;
    border: 1px solid #ddd;
}

.goodsNumbs-left .goodNumbs-leftBot p {
    width: 100%;
    height: 40px;
    font-size: 12px;
    color: #666666;
    background-color: #eee;
    line-height: 40px;
    text-indent: 10px;
}

.goodsNumbs-left .goodNumbs-leftBot .li1 {
    height: 54px;
    line-height: 54px;
    font-size: 12px;
    color: #666;
    margin-left: 10px;
    cursor: pointer;
}

#goodsNumbs-cvn .goodsNumbs-right {
    width: 985px;
    height: 100%;
    float: right;
}

#goodsNumbs #goodsNumbs-cvn #goodsNumbs-header {
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #DDDDDD;
}

#goodsNumbs #goodsNumbs-cvn #goodsNumbs-header li {
    height: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 12px;
    float: left;
    margin-left: 36px;
}

#goodsNumbs #goodsNumbs-cvn #goodsNumbs-header .goodsNumbsone {
    color: #cc5252;
    border-bottom: 3px solid #cc5252;
}

#goodsNumbs #goodsNumbs-cvn #goodsNumbs-header li:hover {
    color: #cc5252;
    border-bottom: 3px solid #cc5252;
}


/* ----------------------------------- */

#goodsNumbs #goodsNumbs-cvn #goodsNumbs-boder {
    width: 100%;
}

#goodsNumbs-boder .goodsNumbs-boderone {
    width: 222px;
    height: 400px;
    /* border: 1px solid #cc5252; */
    overflow: hidden;
    transition: all 0.3s;
}


/* ----- */

.goodsNumbs-boderone .goodsone {
    position: relative;
    height: 276px;
    width: 230px;
    background-color: #F0F8FF;
    overflow: hidden;
}

.goodsNumbs-boderone .goodsone .imgtwo {
    width: 100%;
    height: 276px;
    position: absolute;
    z-index: 1;
}

.goodsNumbs-boderone .goodsone .imgthree {
    width: 100%;
    position: absolute;
    bottom: 0px;
    z-index: 2;
}

.goodsNumbs-boderone .goodsone .imgfore {
    display: block;
    color: #F0F8FF;
    font-weight: bold;
    font-size: 15px;
    position: absolute;
    bottom: 8px;
    right: 10px;
    z-index: 3;
}


/* ----------- */

.goodsNumbs-boderone .goodstwo {
    position: relative;
    top: 5px;
    font-weight: bold;
    font-size: 14px;
}

.goodsNumbs-boderone .goodstwo li {
    float: left;
    margin-left: 5px;
}

.goodsNumbs-boderone .goodstwo li:nth-of-type(1) {
    display: block;
    width: 30px;
    height: 18px;
    background-color: #fb7a7a;
    text-align: center;
    line-height: 18px;
    color: white;
}

.goodsNumbs-boderone .goodstwo li:nth-of-type(2) {
    color: #e85c5c;
}

.goodsNumbs-boderone .goodstwo li:nth-of-type(3) {
    color: #dddddd;
}

.goodsNumbs-boderone .goodstwo li:nth-of-type(4) {
    color: #7a6666;
}


/* ----- */

.goodsNumbs-boderone .goodsthree {
    display: block;
    position: relative;
    width: 220px;
    margin-top: 34px;
}

.goodsNumbs-boderone .goodsthree .spanone {
    display: block;
    position: absolute;
    padding-left: 5px;
    padding-right: 5px;
}

.goodsNumbs-boderone .goodsthree .spanone a {
    font-size: 12px;
    color: #7a6666;
}

.goodsNumbs-boderone .goodsthree .onep {
    font-size: 12px;
    color: red;
    position: absolute;
    top: 40px;
    left: 5px;
}

.goodsNumbs-boderone .goodsthree .twop {
    display: block;
    width: 100%;
    position: absolute;
    top: 63px;
    left: 5px;
}

.goodsNumbs-boderone .goodsthree .twop .spantwo {
    width: 64px;
    height: 22px;
    border: 2px solid #c6a461;
    text-align: center;
    line-height: 22px;
    color: #c6a461;
    font-size: 12px;
}

.goodsNumbs-boderone .goodsthree .twop .spanthree {
    color: #999999;
    font-size: 12px;
    display: block;
    float: right;
    margin-right: 12px;
}

.goodsNumbs-boderone .goodsfore {
    width: 220px;
    height: 22px;
    background-color: ghostwhite;
    position: absolute;
    z-index: 5;
    margin-top: 62px;
    display: none;
    transition: all o.3s;
}

.goodsNumbs-boderone .goodsfore .onea,
.goodsNumbs-boderone .goodsfore .twoa {
    display: block;
    width: 110px;
    height: 22px;
    text-align: center;
    line-height: 22px;
    border: 1px solid grey;
    font-size: 12px;
    float: left;
}

.goodsNumbs-boderone .goodsfore .onea {
    color: black;
}

.goodsNumbs-boderone .goodsfore .twoa {
    color: red;
}

#goodsNumbs-boder li:hover {
    box-shadow: 0px 0px 5px #888888;
}

#goodsNumbs-boder li:hover .goodsfore {
    display: block;
}

#goodsNumbs #goodsNumbs-cvn #goodsNumbs-boder #goodsNumbs-boderone {
    display: none;
}

.goodsNumbs-boderone {
    float: left;
    margin-left: 10px;
    margin-top: 20px;
}


/* ----------------------------------------- */

#goods-lists {
    height: 100px;
    /* border: 1px solid red; */
    margin-top: 70px;
}

#goods-lists ul {
    width: 300px;
    height: 30px;
    /* border: 1px solid red; */
    margin: 0 auto;
}

#goods-lists li {
    float: left;
    margin-left: 20px;
}

#goods-lists li a {
    width: 30px;
    height: 30px;
    display: block;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    color: #808080;
    border: 1px solid grey;
    border-radius: 50%;
}


/* ----------------------------------------------- */

#hander {
    width: 100%;
    height: 620px;
    background-color: #333333;
    position: absolute;
    /* top: 6900px; */
    z-index: 10;
}

#hander #hander-first {
    width: 100%;
    height: 70px;
    background-color: white;
    border-top: 1px solid darkgrey;
}

#hander-first ul {
    height: 70px;
}

#hander-first ul li {
    float: left;
    margin-left: 134px;
}

#hander-first ul li:nth-of-type(1) {
    margin-left: 50px;
}

#hander-first ul li .one {
    width: 48px;
    height: 40px;
    background-image: url(../img/a.png);
    background-position: -408px -356px;
    float: left;
    margin-top: 12px;
}

#hander #hander-first ul li span {
    display: block;
    font-size: 12px;
    color: #66667f;
    float: left;
    margin-top: 24px;
}

#hander-first ul li .xubione {
    background-image: url(../img/a.png);
    background-position: 0px -414px;
}

#hander-first ul li .xubitw0 {
    background-image: url(../img/a.png);
    background-position: -360px -356px;
}

#hander-first ul li .xubifore {
    background-image: url(../img/a.png);
    background-position: -312px -356px;
}

#hander-first ul li .xubifive {
    background-image: url(../img/a.png);
    background-position: -264px -356px;
}

#hander #hander-two {
    height: 220px;
}

#hander #hander-two #hander-twoone {
    width: 216px;
    height: 220px;
    float: left;
}

#hander #hander-two #hander-twotwo {
    width: 666px;
    height: 220px;
    float: left;
}

#hander #hander-two #hander-twothree {
    width: 256px;
    height: 220px;
    float: left;
}

#hander-two #hander-twoone ul {
    margin-top: 46px;
}

#hander-two #hander-twoone ul li:nth-of-type(1) {
    color: #ccaa63;
    font-size: 12px;
}

#hander-two #hander-twoone ul li:nth-of-type(2) {
    color: #ccaa63;
    font-size: 18px;
    margin-top: 22px;
}

#hander-two #hander-twoone ul li:nth-of-type(3) {
    color: #999999;
    font-size: 12px;
    margin-top: 8px;
    margin-bottom: 20px;
}

#hander-two #hander-twoone ul li:nth-of-type(4) {
    color: #999999;
    font-size: 12px;
    width: 136px;
    height: 38px;
    border: 1px solid #999999;
    border-radius: 20px;
    text-align: center;
    line-height: 38px;
}

#hander-two #hander-twotwo ul {
    float: left;
    margin-top: 46px;
    margin-left: 54px;
}

#hander-two #hander-twotwo ul:nth-of-type(1) {
    margin-left: 62px;
}

#hander-two #hander-twotwo ul li {
    color: #999999;
    font-size: 12px;
    margin-bottom: 16px;
}

#hander-two #hander-twotwo ul li:nth-of-type(1) {
    color: #cccccc;
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 22px;
}

#hander-two #hander-twotwo ul:nth-of-type(5) .colorfints {
    color: #cc904a;
    font-weight: bold;
    font-size: 12px;
}

#hander-two #hander-twotwo ul:nth-of-type(5) .colorfint {
    color: #cc904a;
}

#hander #hander-two #hander-twothree img {
    width: 116px;
    height: 116px;
    margin-top: 48px;
    margin-left: 84px;
}

#hander #hander-three {
    height: 226px;
}

#hander #hander-three ul {
    display: block;
    margin-top: 50px;
    margin-left: 164px;
}

#hander #hander-three ul li {
    float: left;
    margin-left: 24px;
}

#hander #hander-three ul li a {
    font-size: 12px;
    color: #999999;
}

#hander #hander-three p:nth-of-type(1) {
    font-size: 12px;
    color: #999999;
    text-align: center;
    margin-top: 46px;
    margin-bottom: 16px;
}

#hander #hander-three p:nth-of-type(2) {
    font-size: 12px;
    color: #999999;
    text-align: center;
    margin-bottom: 16px;
}

#hander #hander-three p:nth-of-type(3) {
    font-size: 12px;
    color: #999999;
    text-align: center;
    margin-bottom: 42px;
}

#hander #hander-fore {
    width: 100%;
    height: 100px;
    background-color: #eeeeee;
}

#hander #hander-fore .hander-fore {
    width: 223px;
    height: 100%;
    margin: 0 auto;
}

#hander #hander-fore .hander-fore img:nth-of-type(1) {
    float: left;
    margin-top: 26px;
}

#hander #hander-fore .hander-fore img:nth-of-type(2) {
    float: right;
    margin-top: 26px;
}